<template>
  <el-card style="max-width: 80vw">
    <div class="main">
      <div class="clubInfo">
        <el-row class="infoTitle" :align="'bottom'" :gutter="80" type="flex">
          <el-col :span="2"> <el-avatar :size="70" :src="clubInfo.backImage" /></el-col>
          <el-col id="clubName" :span="20">{{ clubInfo.clubName }}</el-col>
        </el-row>
        <el-row class="infoHead secondLine">
          <el-col :span="6">
            <div>社团级别：{{ clubInfo.clubLevel }}</div>
          </el-col>
          <el-col :span="12">
            <div>社团状态：{{ clubInfo.clubState }}</div>
          </el-col>
        </el-row>
        <el-row class="infoHead secondLine">
          <el-col :span="3">社团简介：</el-col>
          <el-col :span="20">{{ clubInfo.introduction }}</el-col>
        </el-row>
      </div>
      <div class="contentArea">
        <div class="eachRow" v-for="(item, index) in list" :key="item.multiMediaId" @click="handleRowClick(item, index)">
          <div class="listItem">
            <el-image class="img" :src="item.coverUrl" lazy></el-image>
            <div class="text">
             <div class="titleText">{{ item.title }}</div>
             <div class="footText">{{ item.type == 0 ? '文章' : '视频' }}&nbsp;&nbsp;&nbsp;&nbsp;发布时间：{{ item.createTime }}</div>
            </div>
          </div>
          <hr v-if="index != list.length - 1" />
        </div>
      </div>
      <el-pagination @current-change="handleUpdateList" background layout="prev, pager, next" v-model:current-page="currentPage" v-model:page-size="pagesize" :total="totalNum" />
    </div>
    <show-works :id="workId" :flag="showFlag"></show-works>
  </el-card>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import userStore from '@/stores/store';
import api from '@/api';
import showMessageTip from '@/utils/showMessage';
import ShowWorks from './ShowWorks.vue';

const clubId = userStore().getClubId;
const list = ref([
]);
const totalNum = ref(0);
const currentPage = ref(1);
const clubInfo = reactive({
  clubName:'社团名称',
  backImage: '',
  clubLevel:'',
  clubState:'',
  introduction:''
});
const workId = ref('');
const showFlag = ref(false);
const pagesize = ref(10);

onMounted(async () => {
  if(clubId == -1){
    showMessageTip('请先选择一个社团', 'warning');
    return;
  }
  const result = await api.getBasicClubInfo({ clubId: clubId })
  if (result[0] == 0) {
    const data = result[1].data;
    if (data.code == 1) {
      clubInfo.clubName = data.data.clubName;
      clubInfo.backImage = data.data.backImage;
      clubInfo.introduction = data.data.introduction;
      if (data.data.clubLevel == 0) {
        clubInfo.clubLevel = '校级';
      }
      else if (data.data.clubLevel == 1) {
        clubInfo.clubLevel = '院级';
      }
      if (data.data.clubState == 0)
        clubInfo.clubState = '可加入'
      else if (data.data.clubState == 1)
        clubInfo.clubState = '不可加入'
      else if (data.data.clubState == 2)
        clubInfo.clubState = '已停用'
      await handleUpdateList();
    }
    else {
      showMessageTip('数据获取失败', 'error');
      return;
    }
  }
  else {
    showMessageTip('网络请求失败', 'error');
    return;
  }
})

const handleRowClick = (item,index)=>{
  workId.value = item.multiMediaId;
  showFlag.value = !showFlag.value;
}
const handleUpdateList = async ()=>{
  const reqData ={
    page:currentPage.value,
    pageSize:10,
    clubId:clubId,
  }
  const result = await api.getClubViewList(reqData)
  if(result[0] == 0){
    const data = result[1].data;
    if(data.code == 1){
      totalNum.value = data.data.total;
      list.value = [];
      list.value = data.data.rows;
    }
    else{
      showMessageTip('数据获取失败','error');
      return;
    }
  }
  else{
    showMessageTip('网络请求失败','error');
    return;
  }
}
</script>

<style scoped>
.main{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.clubInfo{
  width:60vw;
  margin-top: 10px;
  padding: 20px;
  border: 1px solid #c5c5c5;
  border-radius: 20px;
}
.infoHead{
  padding: 10px 6px;
}
.infoTitle{
  padding-left: 30px;
}
.secondLine{
  margin-left: 10px;
  color: #333333;
  font-size: 15px;
}
#clubName{
  font-size: 20px;
  margin-left: 10px;
  padding-bottom: 15px;
}
.contentArea{
  width: 60vw;
  margin-top: 40px;
}
.img{
  width: 240px;
  height: 140px;
}
.listItem{
  display: flex;
  margin-bottom: 20px;
}
.eachRow{
  height: 180px;
}
hr{
  border-color: #ffffff;
}
.text{
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
}
.footText{
  padding-left: 6px;
  margin-top: auto;
  font-size: 13px;
  color: #a1a1a1;
}
.titleText{
  font-size: 17px;
}
</style>